<template>
    <!-- 列表商品组件 -->
    <div class="commodity_list">
        <div class="list_top">
            <div class="list_top_img">
                <van-image radius="5" :src="data?.productImage" />
                <img src="" alt="">
                <div class="list_top_img_tag" v-if="data?.hmMechanismsList[1]?.cooperationMode">多机制</div>
            </div>
            <div class="list_top_right">
                <div class="list_top_right_title">
                    <div class="title">{{ data?.styleName }}</div>
                    <div class="remove" @click.stop="deletes">
                        <van-image :src="icon_yichu" />
                        <div>移除</div>
                    </div>
                </div>
                <div class="list_top_right_introduce">{{ data?.sellingPoints }}</div>
                <div class="list_top_right_money">
                    <div class="money_left">
                        <div v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'">
                            ￥<span>{{ data?.hmMechanismsList[0].price }}</span>
                        </div>
                        <div v-else>
                            ￥<span>{{ data?.hmMechanismsList[0].costPrice }}</span>
                        </div>
                        <div v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'" class="commission">
                            <span class="fonts">佣</span>
                            <span class="numbers">
                                {{ data?.hmMechanismsList[0].commission }}%
                            </span>
                        </div>
                    </div>
                    <div class="money_right">
                        {{ data?.hmMechanismsList[0].liveStreamingMechanism }}
                    </div>
                </div>
                <div class="list_top_right_bottom">
                    <div class="specs">
                        <span>{{ data.specs }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
const icon_yichu = new URL("@/assets/operation/icon_yichu.png", import.meta.url).href;
const props = defineProps({
    data: { type: Object, default: () => { } },
})
const emit = defineEmits(['deletes'])
/** 移除 */
const deletes = () =>{
    emit('deletes', props.data.id)
}
</script>

<style lang="less" scoped>
@import url(@/views/operation/operationHomeList/components/style/invest.less);
</style>